<template>
	<view class="edit-goods-detail">
		<div class="wrapper">
			<div class="parent-item" v-for="(parent,pindex) in storeCategory">
				<div class="parent-wrapper" @click="check(parent,'p')">
					<div class="check-box">
						<div class="check ed" v-if="parent.check">
							<u-icon name="checkbox-mark" color="#ffffff" size="24"></u-icon>
						</div>
						<div class="check no" v-else></div>
					</div>
					<div class="text">{{parent.labelName}}</div>
				</div>
				<div v-if="parent.children&&parent.children.length!==0">
					<div class="children-item" v-for="(children,cindex) in parent.children">
						<div class="children-wrapper" @click="check(children,'c',parent)">
							<div class="check-box">
								<div class="check ed" v-if="children.check">
									<u-icon name="checkbox-mark" color="#ffffff" size="28"></u-icon>
								</div>
								<div class="check no" v-else></div>
							</div>
							<div class="text">{{children.labelName}}</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<button class="button-add" @click="confirm">确定</button>
	</view>
</template>

<script>
	import api from "@/config/api.js";
	import storage from "@/utils/storage.js";
	export default {
		name: 'edit-goods-detail',
		data() {
			return {
				storeCategory: [],
			}
		},
		onLoad() {
			let StoreCategory = uni.getStorageSync('StoreCategory')
			if (StoreCategory) {
				this.storeCategory = StoreCategory
			}
		},
		onUnload() {
			
		},
		methods: {
			check(current, type, parent) {
				if (type === 'p') {
					let bool = !current.check
					if (current.children) {
						current.check = bool
						current.children = current.children.map((item) => {
							item.check = bool
							return item
						})
					}
				}
				if (type === 'c') {
					let pf = parent.children.filter((item) => {
						return item.check === current.check
					})
					let bool = !current.check
					current.check = bool
					if (pf.length === 1) {
						parent.check = bool
					} else {
						if (bool === false) {
							parent.check = bool
						}
					}
				}
			},
			confirm(){
				uni.setStorageSync('StoreCategory', this.storeCategory)
				uni.navigateBack()
			},
		}
	}
</script>

<style lang="scss" scoped>
	.edit-goods-detail {
		.wrapper {
			background-color: #ffffff;
			height: 86vh;
			overflow: auto;
			padding: 40upx;

			.parent-item {
				.parent-wrapper {
					display: flex;
					padding: 16upx 0;
					align-items: center;
				}
			}

			.children-item {
				padding-left: 60upx;
			}

			.children-wrapper {
				display: flex;
				padding: 16upx 0;
				align-items: center;
			}

			.check-box {
				flex: 0 0 80upx;
				width: 80upx;

				.check {
					width: 36upx;
					height: 36upx;
					box-sizing: border-box;
					display: flex;
					align-items: center;
					justify-content: center;
					border-radius: 4upx;
				}

				.ed {
					background-color: rgba(18, 125, 255, 1);
				}

				.no {
					border: 2upx solid #999999;
				}
			}
		}

		.button-add {
			margin-top: 32upx;
			width: 360upx;
			height: 64upx;
			line-height: 64upx;
			background: linear-gradient(270deg, rgba(118, 194, 245, 1) 0%, rgba(18, 125, 255, 1) 100%);
			border-radius: 40upx;
			color: #ffffff;
			font-size: 28upx;
		}
	}
</style>
